<template>
  <view class="content">
    <view class="h-title">{{$t('mine.sheZhiDlMm')  }}</view>
    <view class="sub-title">{{$t('mine.huoQuYzMh')  }}</view>
    <view class="form-wrap">
      <u-form labelPosition="left" :model="formMode" :rules="rules" ref="uForm" errorType="border-bottom" :labelWidth="80">
        <u-form-item :label="$t('mine.shouJiHm')" borderBottom ref="item1">
          <view class="form-item">
            {{ formMode.phone }}
          </view>
        </u-form-item>
        <u-form-item :label="$t('mine.yanZhengM')" prop="smsCode" ref="item1" required borderBottom>
          <view class="form-item">
            <u-input :placeholder="$t('login.shuRuYzM')" border="none" type="number" v-model="formMode.smsCode">
              <u-text slot="suffix" :text="tips" color="#75CECC" @click="getCode" />
            </u-input>
          </view>
        </u-form-item>
        <u-form-item :label="$t('mine.dengLuMm')" prop="password" borderBottom ref="item1" required>
          <view class="form-item">
            <u-input v-model="formMode.password" border="none" type="password" :placeholder="$t('mine.sheZhiDlMm')" />
          </view>
        </u-form-item>
        <u-form-item :label="$t('mine.queRenMm')" prop="repPassword" ref="item1" required borderBottom>
          <view class="form-item">
            <u-input v-model="formMode.repPassword" border="none" type="password" :placeholder="$t('mine.queRenMm')" />
          </view>
        </u-form-item>
      </u-form>
    </view>

    <view class="next">
      <u-button type="success" loadingText="加载中" color="#75CECC" @click="submit" shape="circle">{{ $t('mine.baoCun') }}</u-button>
    </view>
    <u-code :seconds="seconds" uniqueKey="set_password" ref="uCode" @change="codeChange" :startText="$t('login.huoQuYzM')" :endText="$t('login.huoQuYzM')" />
  </view>
</template>

<script>
import uploadImage from "../../components/uploadImage.vue";
export default {
  components: {
    uploadImage,
  },
  data() {
    return {
      formMode: {
        id: "",
        phone: "",
        password: "",
        repPassword: "",
        smsCode: "",
      },
      tips: "",
      seconds: 60,
      rules: {
        smsCode: {
          type: "string",
          required: true,
          trigger: ["blur", "change"],
        },
        password: {
          type: "string",
          required: true,
        },
        repPassword: {
          type: "string",
          required: true,
        },
      },
    };
  },
  onLoad(options) {
    if (options?.phone) {
      this.formMode.phone = options.phone;
    }
  },
  onReady() {
    uni.setNavigationBarTitle({
      title: this.$t("mine.sheZhiMm"),
    });
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
    this.getUserInfo();
  },
  methods: {
    codeChange(text) {
      this.tips = text;
    },
    async getCode() {
      if (this.$refs.uCode.canGetCode) {
        const res = await this.$api.generateSmsCode({
          phone: this.formMode.phone,
        });
        if (res.code === 0) {
          this.$refs.uCode.start();
        }
      } else {
        uni.$u.toast(this.$t("login.daoJiSjS"));
      }
    },
    async getUserInfo() {
      const res = await this.$api.getPersonalInformation({});
      if (res.code === 0) {
        this.formMode.id = res.data.id;
        this.formMode.phone = res.data.phone;
      }
    },
    submit() {
      this.$refs.uForm
        .validate()
        .then(() => {
          if (this.formMode.password !== this.formMode.repPassword) {
            return uni.$u.toast(this.$t("mine.liangCiMmByZ"));
          }
          this.seconds = 60;
          this.$refs.uCode.reset();
          this.$api.updateUserPwd(this.formMode).then((res) => {
            if (res.code === 0) {
              uni.$u.toast(this.$t("mine.miMaXgCg"));
              this.$refs.uForm.resetFields();
              this.formMode.password = "";
              this.formMode.repPassword = "";
              this.formMode.smsCode = "";
              uni.navigateBack();
            } else {
              uni.$u.toast(res.msg);
            }
          });
        })
        .catch((errors) => {
          uni.$u.toast(this.$t("login.jiaoYanSb"));
        });
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: #f6f6f6 !important;
}
</style>
<style lang="scss" scoped>
.h-title {
  font-size: 20px;
  color: #333;
  padding: 20px;
}
.sub-title {
  color: #333;
  padding: 0 20px 40px;
  font-size: 14px;
}
.form-wrap {
  padding: 0 30px;
  overflow: hidden;
  background-color: #fff;
}
/deep/.u-radio:last-child {
  margin-left: 20px; /* 设置radio按钮之间的水平间距为20px */
}
.uploads-img {
  display: flex;
  padding-top: 20px;
  height: 110px;
  overflow: hidden;
}
.form-item {
  height: 30px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.next {
  padding: 0 60px;
  overflow: hidden;
  height: 60px;
  margin-top: 40px;
}
</style>
